<template>
  <!-- 评论弹出层 -->
  <!-- v-model.trim 修饰符 ：自动删除空格 -->
  <div class="popupsty">
    <van-field
      v-model.trim="message"
      rows="2"
      autosize
      label="留言"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
      class="textareastly"
    />
    <van-button
      type="default"
      class="fabubutton"
      :loading="loading"
      @click="postcomment"
      :disabled="disabled"
      >发布</van-button
    >
  </div>

  <!-- /评论弹出层 -->
</template>

<script>
import { postcomment } from "@/api/user.js";
import lodash from "lodash";
export default {
  data() {
    return {
      message: "", //评论内容
      loading: false, //按钮加载状态
      disabled: true, //按钮禁用
    };
  },
  props: {
    atrid: {
      type: [Number, Object, String],
      require: true,
    },
  },
  watch: {
    message: {
      handler: lodash.debounce(function (value) {
        if (value) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      }, 500),
    },
  },
  methods: {
    // 发评论
    async postcomment() {
      this.loading = !this.loading;
      if (this.message) {
        try {
          const { data } = await postcomment({
            target: this.atrid,
            content: this.message,
          });
          this.$toast.success("留言成功");
          console.log(data);
          this.message = "";
          this.$emit("newcomment", data.data);
        } catch (err) {
          this.$toast("评论失败，稍后重试");
          console.log(err);
        }
      } else {
        this.$toast("写点内容吧");
      }
      this.loading = !this.loading;
    },
  },
};
</script>

<style lang="less" scoped>
.popupsty {
  display: flex;
  height: 100%;
  width: 100%;
  .fabubutton {
    flex: 1;
    height: 100%;
    color: #3296fa;
  }
  /deep/.textareastly {
    flex-direction: column;
    flex: 4;
  }
}
</style>